<!--
 * @Author: your name
 * @Date: 2020-09-24 14:11:36
 * @LastEditTime: 2020-12-18 14:09:26
 * @LastEditors: lxc
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\App.vue
-->
<template>
    <a-layout id="components-layout-demo-top"
              class="layout">
        <router-view></router-view>
        <!-- <a-layout-header>
            <div class="logo" />
            <a-menu theme="dark"
                    mode="horizontal"
                    v-model:selectedKeys="selectedKeys"
                    :style="{ lineHeight: '64px' }">
                <a-menu-item key="/">
                    <router-link to="/">首页</router-link>
                </a-menu-item>
                <a-menu-item key="/plan">
                    <router-link to="/plan">时间计划</router-link>
                </a-menu-item>
            </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
            <a-breadcrumb style="margin: 16px 0"></a-breadcrumb>
            <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
                <a-row>
                    <a-col :span="6">
                        <a-card title="计划总用时"
                                style="width:100%">
                            <p>总共计划时长是：{{allTime}}</p>
                        </a-card>
                    </a-col>
                    <a-col :span="16"
                           :offset='2'>
                    </a-col>
                </a-row>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer> -->
    </a-layout>
</template>
<script>
import { reactive, toRefs, watch, computed, ref, onMounted, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
// import { current, register } from './api/index.ts'
export default {
    setup(props, context) {
        // props父组件传来的值 
        // context 有attr slots emit
        // 渲染时触发一次
        const route = useRoute();
        const store = useStore();
        const state = reactive({
            selectedKeys: computed(() => {
                return [route.path];
            }),
            // ref对单一变量包装 变成响应式的 例如store中取值  
            allTime: ref(store.getters.allTime)
        });
        // 使当前选中与路由路径统一
        // watch(() => route.path, (newValue) => {
        //     state.selectedKeys = [newValue]
        // }, { immediate: true })// immediate立即执行
        // 使当前选中与路由路径统一 也可直接在常量中使用
        // const selectedKeys = computed(() => {
        //     return [route.path];
        // })
        // const state = reactive({
        //     selectedKeys: computed(() => {
        //         return [route.path];
        //     })
        // });
        onMounted(() => {
            // let data = {
            //     name:'lxcContect',
            //     password:'123123',
            //     password2:'123123',
            //     email:'516463987@qq.com'
            // }
            // register().then(res => {

            // })
            // current().then(res => {
            //     console.log(res);
            // })
        })
        return {
            ...toRefs(state),  //toRefs 保证数据是响应式的 实时更改变量值 页面也实时重新渲染 有结构的功能
            // selectedKeys
        }
    }
};
</script>
<style>
#components-layout-demo-top .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
.layout{
    height: 100%;
}
</style>